<template>
  <view>
    <view class="search-box">
      <my-search @click="gotoSearch"></my-search>
    </view>
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item,index) in swpipersList" :key='index'>
       
          <navigator :url="'/subPackage/goods_detail/goods_detail?goods_id=' + item.goods_id"  class="swiper-item" >
          <image :src="item.image_src" class="swiper-img"></image>
          </navigator>
       
      </swiper-item>
    </swiper>
    
    <view class="nav-list">
      <view class="nav-item" v-for="(item,index) in navsList" :key="index" @click="navClickHandler(item)">
        <image :src="item.image_src" class='nav-img'></image>
      </view>
    </view>
    
   <view class="floor-list">
       <view class="floor-item" v-for="(item1,index1) in floorList" :key="index1">
         <image :src="item1.floor_title.image_src" class="floor-title"></image>
         <!-- 左侧大图片 -->
         <view class="floor-img-box">
             <navigator class="left-img-box" :url="item1.product_list[0].url">
              <image :src="item1.product_list[0].image_src" mode="widthFix"
              			:style="{width: item1.product_list[0].image_width + 'rpx'}">
              </image>
             </navigator>
            <!-- 右侧小图片 -->
             <view class="right-img-box">
               <navigator class="right-img-item" v-for="(item2,index2) in item1.product_list" :key="index2" v-if="index2 !=0" :url="item2.url">
                 <image :src="item2.image_src" mode="widthFix" :style="{width: item2.image_width + 'rpx'}">
                   </image>
               </navigator>
             </view>
         </view>
       </view>
      
     
    
   </view>
  <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
  				</map>
          
          
           <button @click="tome"  type="warn">跳转到实验界面</button>
  </view>
</template>

<script>
  import badgeMix from '@/mixins/tabbar-badge.js';
  export default {
     
     mixins:[badgeMix],
    data() {
      return {
        swpipersList:[],
        navsList:[],
        floorList:[],
        latitude: 39.909,
        longitude: 116.39742,
        			covers: [{
        				latitude: 39.909,
        				longitude: 116.39742,
        				iconPath: '../../static/static/tab_icons/cate-active.png'
        			}]
      };
    },
    methods:{
          async getSwpierList(){
       
            let {data:result} = await uni.$http.get('/api/public/v1/home/swiperdata');
            if(result.meta.status != 200){
              uni.$showMsg();
              return
            }
            this.swpipersList = result.message;
          },
          async getNavsList(){
            let {data:result} = await uni.$http.get('/api/public/v1/home/catitems')
            if(result.meta.status !=200){
              uni.$showMsg();
              return
            }
            this.navsList =result.message
          },
          navClickHandler(item){
            if(item.name == '分类'){
              uni.switchTab({
              						url: '/pages/category/category'
              					})
            }
          },
          async getFloorList(){
            let {data:result} = await uni.$http.get('/api/public/v1/home/floordata');
          if(result.meta.status !=200){
            uni.$showMsg();
            return;
          }
          result.message.forEach(item=>{
            item.product_list.forEach(product=>{
              product.url = '/subPackage/good_list/good_list?' + product.navigator_url.split('?')[1];
              console.log(product.navigator_url.split('?')[1]);
              console.log(product.url);
            })
          })
          this.floorList =result.message;
          console.log(result.message);
          },
          gotoSearch(){
            uni.navigateTo({
              url:'/subPackage/search/search'
            })
          },
          tome(){
            uni.navigateTo({
              url:'/subPackage/me/me'
            })
          }
    },
    onLoad(options){
      this.getSwpierList();
      this.getNavsList();
      this.getFloorList()
    }
  }
</script>

<style lang="scss">
    .search-box{
      position: sticky;
      top:0;
      z-index:999;
    }
  swiper{
    height:330rpx;
    .swiper-item,image{
      height: 100%;
     width: 100%;
     border-radius: 15px;
    }  
    }

.nav-list{
		display: flex;
		justify-content: space-around;
		margin: 15px 0;
		
		.nav-img{
			width: 128rpx;
			height: 140rpx;
		}
	}
  .floor-title{
  		height: 60rpx;
  		width: 100%;
  	}
    .right-img-box{
      display:flex;
      flex-wrap:wrap;
      justify-content: space-around;
    }
    .floor-img-box{
      display:flex;
 padding-left: 10rpx;
    
    }
    .floor-item{
      margin-top: 30rpx;
      margin-bottom: 30rpx;
    }

</style>
 